<template>
	<view class="container">
		<view class="main">
			<z-paging ref="paging" v-model="indexData.pages" @query="upCallback" :fixed="false" height="100%">
				<view v-for="(item, index) in indexData.pages" :key="index">
					<template v-if="item.name == 'search'">
						<w-search :content="item.content" :styles="item.styles" />
					</template>
					<template v-if="item.name == 'banner'">
						<w-banner :content="item.content" :styles="item.styles" />
					</template>
					<template v-if="item.name == 'nav'">
						<systemNotice></systemNotice>
						<w-nav :content="item.content" :styles="item.styles" />
						<systemRecommendGrid></systemRecommendGrid>
					</template>
				</view>

				<!-- 热门服务 -->
				<template v-if="indexData?.hotService?.length">
					<hot :lists="indexData.hotService"></hot>
				</template>

				<!-- 师傅推荐 -->
				<template v-if="indexData?.staff?.length">
					<master :lists="indexData.staff"></master>
				</template>

				<joinUs></joinUs>

				<!-- 推荐分类 -->
				<!-- <view v-if="indexData?.category?.length">
					<category :lists="indexData.category"></category>
				</view> -->
			</z-paging>
		</view>

		<!-- 底部导航栏 -->
		<Tabbar />
	</view>
</template>

<script setup lang="ts">
	import { getIndex } from '@/api/shop'
	import { reactive, shallowRef, nextTick } from 'vue'
	import { onLoad, onUnload, onShareAppMessage } from '@dcloudio/uni-app'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	import Category from './comp/category.vue'
	import Hot from './comp/hot-list.vue'
	import Master from './comp/master-list.vue'
	import systemNotice from './comp/system-notice.vue'
	import systemRecommendGrid from './comp/systemRecommendGrid.vue'
	import joinUs from './comp/join-us.vue'
	import { useAppStore } from '@/stores/app'

	const appStore = useAppStore()
	const paging = shallowRef()
	const indexData = reactive<any>({
		pages: [],
		hotService: [],
		staff: [],
		category: []
	})

	const upCallback = async () : Promise<void> => {
		try {
			const data = await getIndex({
				cityId: appStore.cityInfo.city_id
			})
			for (const key in indexData) {
				if (data[key] != null && data[key] != undefined) {
					indexData[key] = data[key]
				}
			}
			indexData.pages = JSON.parse(data.pages)
			console.log(indexData)

			paging.value.complete(indexData.pages)
		} catch (err) {
			console.log(err)
			paging.value.complete(false)
		}
	}

	onLoad(() => {
		uni.$on('refreshhome', () => {
			upCallback()
		})
	})

	onUnload(() => {
		uni.$off('refreshhome')
	})

	// #ifdef MP
	const updateManager = wx.getUpdateManager()
	updateManager.onUpdateReady(function () {
		wx.showModal({
			title: '更新提示',
			content: '新版本已经准备好，是否重启应用？',
			success(res) {
				if (res.confirm) {
					// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
					updateManager.applyUpdate()
				}
			}
		})
	})
	updateManager.onUpdateFailed(function () {
		uni.$u.toast('新版本下载失败，请检查网络！')
	})
	// #endif
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
		flex-direction: column;
		position: relative;

		.main {
			flex: 1;
			min-height: 0;
			overflow: scroll;
			margin-bottom: -48px;
			padding-bottom: 24px;
			position: relative;
			z-index: 1;

			:deep(.zp-l-container) {
				box-sizing: content-box;
				padding-bottom: 16px;
			}
		}
	}
</style>